<template>
    <div>
        <template v-for="item in this.menuList">
            <el-submenu :index="item.menu_id+''" :key="item.menu_id" v-if="item.children!==null">
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{ item.menu_name }}</span>
                </template>
                <MenuTree :menuList="item.children"></MenuTree>
            </el-submenu>
            <el-menu-item
                    :index="item.path+''"
                    :route="item.path+''"
                    :key="item.menu_id"
                          v-else>
                <i :class="item.icon"></i>
                <span slot="title">{{ item.menu_name }}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'MenuTree',
        props: ['menuList']
    }
</script>

<style scoped>
    .el-menu--collapse span,
    .el-menu--collapse i.el-submenu__icon-arrow {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: none;
    }
</style>
